<template>
  <a-drawer
    title="主题配置"
    placement="right"
    :closable="false"
    :visible="visible"
    @close="onClose"
    width="350"
  >
    <a-form
      :label-col="{ span: 12 }"
      :wrapper-col="{ span: 12, offset: 2 }"
      labelAlign="left"
      :model="settingConfig"
      name="basic"
    >
      <a-form-item label="导航栏布局" name="menuMode">
        <a-select
          v-model:value="settingConfig.menuMode"
          style="width: 120px"
          :options="menuModeOPtions"
          @select="onSelect"
        ></a-select>
      </a-form-item>
      <a-form-item label="侧边栏 Logo">
        <a-switch
          v-model:checked="settingConfig.sibarLogo"
          @change="onChangeLogo"
        />
      </a-form-item>
      <a-form-item label="保持一个子菜单的展开">
        <a-switch
          v-model:checked="settingConfig.isOpenSingle"
          @change="onChangeOpen"
        />
      </a-form-item>
      <a-form-item label="主题模式">
        <a-radio-group
          v-model:value="settingConfig.themeType"
          @change="changeTheme"
          buttonStyle="solid"
          optionType="button"
        >
          <a-radio value="default">默认</a-radio>
          <a-radio value="dark">暗黑</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>
<script lang="ts" setup>
import { ILayout, Mode, Theme } from "@/type/Layout";
import { reactive, ref } from "vue";
import { useLayoutStore } from "@/store/modules/Layout";
import { SelectProps } from "ant-design-vue";
import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils.js";

const layoutStore = useLayoutStore();

const menuModeOPtions = ref<SelectProps["options"]>([
  {
    value: "horizontal",
    label: "横向",
  },
  {
    value: "inline",
    label: "纵向",
  },
]);

let emit = defineEmits(["update:visible"]);
let props = defineProps({
  visible: Boolean,
});
const settingConfig = reactive<ILayout>({
  menuMode: layoutStore.$state.menuMode,
  sibarLogo: layoutStore.$state.sibarLogo,
  isOpenSingle: layoutStore.$state.isOpenSingle,
  themeType: layoutStore.$state.themeType,
});
const onSelect = (value: Mode) => {
  layoutStore.setMenuMode(value);
};
const onChangeLogo = (value: Boolean) => {
  layoutStore.setSibarLogo(value);
};
const onChangeOpen = (value: Boolean) => {
  layoutStore.setIsOpenSingle(value);
};
const onClose = () => {
  emit("update:visible");
};
// 切换主题回调
const changeTheme = (value: any) => {
  // 如果开关打开，就切换为绿色主题，否则默认黄色主题
  if (value.target.value === "dark") {
    toggleTheme({
      scopeName: "theme-dark",
    });
  } else {
    toggleTheme({
      scopeName: "theme-default",
    });
  }
  layoutStore.setThemeType(value.target.value === "dark" ? "dark" : "default");
};
</script>
<style lang="less" rel="stylesheet/less" scoped></style>
